<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 md8 offset-md2 class="px-2 mt-5"  transition="scale-transition">
      <v-alert :type="level" dismissible v-model="alert" @click="hideNotification">
        {{msg}}
      </v-alert>
    </v-flex>
  </v-layout>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  name: 'notification',
  computed: {
    ...mapState({
      level: state => state.Notification.level,
      msg: state => state.Notification.msg,
      alert: state => state.Notification.alert
    })
  },
  methods: {
    ...mapActions([
      'hideNotification'
    ])
  }
}
</script>

<style scoped>
  .alert {
    font-size: 1.5rem;
  }
</style>
